
<script setup>
import { ref } from 'vue';
import axios from 'axios';

import codeAlert from './codeAlert.vue'

const record = ref(false)

const refCodeAlert = ref()

const list = ref([]);

const setRecord = async (b)=>{
  const {data} = await axios.get("/api/gk_receive_list",{
    params:{
      open_id:window.openid
    }
  })
  list.value=data.data;
    record.value=b;
}



const toCode = (item) => {
    refCodeAlert.value.setAlert(true);
    refCodeAlert.value.setData({
      url:item.qrcode,
      name:item.name
    })
}

defineExpose({ setRecord })


</script>

<template>
    <div v-if="record" class="masking" >
      <div class="record" >
        <div style="display: flex;justify-content: space-between;padding: 11px 15px">
              <div></div>
              <div style="font-family: PingFang SC-Bold, PingFang SC;color: #333333;font-weight: bold;font-size: 16px;">中奖记录</div>
              <div @click="()=>{ record=false; }" >
                  <img src="../assets/close.png" style="width: 20px;height: 20px;">
              </div>
          </div>
          <div class="list" >
            <div v-for="(item,itemIndex) in list" :key="itemIndex" class="itemOne" >
              <div class="recordTitle" >
                <div class="one" >{{ item.name }}</div>
                <div class="two" >到期时间: {{ item.endTime }}</div>
              </div>
              <div class="btnPan" @click="toCode(item)" >兑换</div>
            </div>
          </div>
      </div>
      <codeAlert ref="refCodeAlert" ></codeAlert>
    </div>
</template>

<style lang="less" scoped>

.masking{
  position: fixed;
  top:0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);
  .record{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background: linear-gradient(180deg, #FFEAEE 0%, #FFFFFF 100%);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    .list{
      width: 100%;
      height: 40vh;
      overflow-y: auto;
      .itemOne{
        width: 100%;
        height: 44px;
        background: rgba(255,255,255,0.01);
        padding-left: 16px;
        padding-right: 16px;
        display: flex;
        box-sizing: border-box;
        .recordTitle{
          flex: 1;
          .one{
            color: #333333;
            font-size: 13px;
            font-weight: bold;
            line-height: 15px;
          }
          .two{
            padding-top: 2px;
            font-size: 11px;
            color: #333333;
            font-weight: 500;
            opacity: 0.5;
            line-height: 13px;
          }
        }
        .btnPan{
          width: 63px;
          height: 32px;
          background: #FD144A;
          border-radius: 35px 35px 35px 35px;
          text-align: center;
          color: #FFFFFF;
          font-size: 13px;
          font-weight: bold;
          line-height: 32px;
        }
        .btnNoPan{
          background: #BBBBBB;
        }
      }
    }
  }
}

</style>